import React, { Component } from 'react'
import {Card,List} from 'antd'
import { LeftOutlined } from '@ant-design/icons'
import LinkButton from '@/components/link-button'
import {reqCategory} from '@api/product'
import {BASE_IMG_URL} from '@/utils/constant'

export default class detail extends Component {
    state = {cName1:'',cName2:''}

    async componentDidMount(){
        const {pCategoryId, categoryId} = this.props.location.state
        // 如果是父商品ID则发一个请求就够
        if(pCategoryId==='0'){
            const result = await reqCategory(categoryId)
            this.setState({cName1:result.data.name})
        }else{
            // 否则一次性发送多个请求，都成功的话才正常处理
            const results = await Promise.all([reqCategory(pCategoryId),reqCategory(categoryId)])
            this.setState({cName1:results[0].data.name,cName2:results[1].data.name})
        }
    }

    render() {
        // 接受传递过来的state里面的一些数据
        const {name,desc,price,imgs,detail} = this.props.location.state 
        // 把categoryId兑换成文字
        const {cName1, cName2} = this.state
        const title = (
            <span> 
                <LinkButton>
                    <LeftOutlined onClick={()=>this.props.history.goBack()} style={{color:'blue',marginRight:15,fontSize:20}}/>
                </LinkButton>
                <span>商品详情</span>
            </span>
        )
        return (
            <Card title={title} className='product-detail'>
                <List>
                    <List.Item>
                        <span className='left'>商品名称:</span>
                        <span>{name}</span>
                    </List.Item>
                    <List.Item>
                        <span className='left'>商品描述:</span>
                        <span>{desc}</span>
                    </List.Item>
                    <List.Item>
                        <span className='left'>商品价格:</span>
                        <span>{price}</span>
                    </List.Item>
                    <List.Item>
                        <span className='left'>所属分类:</span>
                        <span>{cName1}{cName2?' --> '+cName2:''}</span>
                    </List.Item>
                    <List.Item>
                        <span className='left'>商品图片：</span>
                        <span>
                          {
                              imgs.map(img=>{
                                  return (<img key={img} alt="产品图片" className="productImg" src={BASE_IMG_URL+img}/>)
                              })
                          }
                        </span>
                    </List.Item>
                    <List.Item>
                        <span className='left'>商品详情：</span>
                        <span dangerouslySetInnerHTML = {{ __html:detail }} ></span>
                    </List.Item>
                </List>
            </Card>
            )
    }
}
